<!-- @format -->
<script setup>
	import { ref } from 'vue'

	// 控制盒子是否可见
	const visible = ref(true)

	// 模拟是否登录
	const isLogin = ref(true)

	// 成绩
	const mark = ref(55)
</script>

<template>
	<div>
		<!-- v-show -->
		<div
			class="red"
			v-show="visible"></div>
		<!-- v-if -->
		<div
			class="green"
			v-if="visible"></div>

		<hr />

		<!-- v-if配合v-else做双分支渲染 -->
		<div v-if="isLogin">xxx，欢迎回来</div>
		<div v-else>你好，请登录</div>

		<hr />
		<!-- v-if配合v-else-if和v-else做多分支渲染 -->
		<div v-if="mark >= 90">优秀</div>
		<div v-else-if="mark >= 70">良好</div>
		<div v-else>差</div>
	</div>
</template>

<style scoped>
	.red,
	.green {
		width: 200px;
		height: 200px;
	}

	.red {
		background: red;
	}
	.green {
		background: green;
	}
</style>
